<template>
	<view class="addService_box">
		<scroll-view scroll-y class="service_list">
			<view class="service_item_box" v-for="(item, index) in serviceList" :key="index" @tap="selectService(item)">
				<view class="service_title">
					<view class="title_content">
						<image class="service_picture" :src="item.thumPic"></image>
						<view class="service_name">{{item.name}}</view>
					</view>
					<view v-show="currentServiceInfo.id != item.id" class="service_check"></view>
					<image v-show="currentServiceInfo.id == item.id" src="https://xjs-oss-prod.oss-cn-shenzhen.aliyuncs.com/xjs-static/icon-13.png" class="service_checked"></image>
				</view>
			</view>
		</scroll-view>
		<view class="footer_box">
			<view class="footer_button" @tap="toNextStep">下一步，设置价格</view>
		</view>
		<skuPopup ref="skuPopupRef" :data="currentServiceInfo" @confirm="getSelectedSkuList"/>
	</view>
</template>

<script setup>
	import api from '@/api'
	import { ref } from 'vue'
	import { onLoad, onShow } from '@dcloudio/uni-app'
	import { useServiceStore } from '@/store/useServiceStore'
	import skuPopup from '@/pages/workshopManagement/components/skuPopup.vue'
	
	const skuPopupRef = ref({})
	const serviceList = ref([])
	const timeList = ref([
		{
			id: 1,
			name: '20分钟'
		},
		{
			id: 2,
			name: '20分钟'
		},
		{
			id: 3,
			name: '20分钟'
		},
		{
			id: 4,
			name: '20分钟'
		}
	])
	const studioId = ref()
	const currentServiceInfo = ref({})
	
	onLoad((data) => {
		studioId.value = data.studioId
	})
	onShow(async () => {
		await getServiceList()
		if (serviceList.value && serviceList.value.length > 0) {
			selectService(serviceList.value[0] || {})
		}
	})
	
	const selectService = (data) => {
		data.petRangeMarkUp = {}
		data.petNumMarkUp = {}
		currentServiceInfo.value = data
	}
	const selectServiceTime = (item,skuItem) => {
		skuItem.selected = !skuItem.selected
	}
	const getServiceList = async () => {
		const id = studioId.value
		let { data } = await api({
			method: 'GET',
			url: `/mall/goods/goods/list`
		})
		serviceList.value = data
	}
	const toNextStep = () => {
		const skuList = currentServiceInfo.value.skuList || []
		if (skuList.length > 0) {
			skuPopupRef.value.open()
		} else {
			toSetUpService()
		}
	}
	const toSetUpService = () => {
		useServiceStore().selectedServiceList = [currentServiceInfo.value]
		uni.redirectTo({
			url: `/pages/workshopManagement/modifyService/index?type=add&studioId=${studioId.value}`
		})
	}
	
	const getSelectedSkuList = (selectedSkulist) => {
		currentServiceInfo.value.skuList = selectedSkulist
		toSetUpService()
	}
</script>

<style lang="scss" scoped>
	.addService_box {
		width: 100%;
		height: 100%;
		background: #F9F6F6;
		padding: 24rpx 32rpx;
		padding-bottom: 112rpx;
		padding-bottom: calc(112rpx + constant(safe-area-inset-bottom));
		padding-bottom: calc(112rpx + env(safe-area-inset-bottom));
		box-sizing: border-box;
		
		.service_list {
			height: 100%;
			
			.service_item_box {
				padding: 32rpx;
				background: #FFFFFF;
				border-radius: 24rpx;
				margin-bottom: 32rpx;
				
				.service_title {
					display: flex;
					justify-content: space-between;
					align-items: center;
					
					.title_content {
						flex: 1;
						display: flex;
						align-items: center;
						
						.service_picture {
							width: 96rpx;
							height: 96rpx;
							border-radius: 24rpx;
							margin-right: 16rpx;
						}
						.service_name {
							flex: 1;
							font-weight: bold;
							font-size: 36rpx;
							color: #1B2120;
						}
					}
					.service_check {
						width: 48rpx;
						height: 48rpx;
						border-radius: 50%;
						border: 2rpx solid #000000;
						box-sizing: border-box;
					}
					.service_checked {
						width: 48rpx;
						height: 48rpx;
						border-radius: 50%;
						box-sizing: border-box;
					}
				}
			
				.service_content {
					margin-top: 40rpx;
					padding-top: 40rpx;
					border-top: 1rpx solid #E6E6E6;
					
					.content_label {
						font-weight: bold;
						font-size: 26rpx;
						color: #1A1A1A;
						margin-bottom: 24rpx;
					}
					.service_time_box {
						display: grid;
						grid-template-columns: repeat(3,1fr);
						grid-column-gap: 16rpx;
						grid-row-gap: 24rpx;
						
						.service_time_item {
							height: 70rpx;
							border-radius: 8rpx;
							border: 1rpx solid #CACCCC;
							font-size: 30rpx;
							color: #5C5E5E;
							line-height: 70rpx;
							text-align: center;
						}
						.service_time_item_pick {
							border: 1rpx solid #FF6084;
							color: #FF6084;
						}
					}
				}
			}
		}
	
		.footer_box {
			position: fixed;
			left:0;
			bottom: 0;
			width: 100%;
			padding: 4rpx 32rpx;
			border-top: 1rpx solid #F9F6F6;
			background: #FFFFFF;
			box-sizing: border-box;
			padding-bottom: calc(8rpx + constant(safe-area-inset-bottom));
			padding-bottom: calc(8rpx + env(safe-area-inset-bottom));
		
			.footer_button {
				width: 100%;
				height: 88rpx;
				line-height: 88rpx;
				text-align: center;
				background: linear-gradient( 90deg, #FF6188 0%, #FF5252 100%);
				border-radius: 44rpx;
				font-size: 28rpx;
				color: #FFFFFF;
				
			}
		}
	}
</style>